<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>zzh的网站</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            color: #fff;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(90deg, #892cdf 0%, #6c9ac9 100%);
        }

        .messages {
            margin-top: 100px;
            width: 1200px;
            padding: 50px 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: rgba(255, 255, 255, 0.43);
            border-radius: 20px;
            box-shadow: 0 10px 30px #00000020;
        }

        .form {
            display: flex;
            justify-content: center;
            position: relative;
            flex-direction: column;
            width: 100%;
            padding-bottom: 70px;
        }

        input:focus,
        textarea:focus {
            outline: none;
        }

        input,
        textarea {
            border: none;
            color: #000;
            margin-bottom: 40px;
            font: 900 40px;
            border-radius: 10px;
            padding: 30px;
        }

        #username {
            height: 90px;
        }

        #message {
            height: 200px;
        }

        .messages h1 {
            width: 100%;
            text-align: left;
            margin-bottom: 70px;
            font-size: 140px;
            background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 10px;
        }

        #submitBtn {
            position: absolute;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(90deg, #e0c3fc 0%, #8ec5fc 100%);
            border: none;
            font-size: 30px;
            width: 200px;
            height: 70px;
            border-radius: 50px;
        }

        #messageBoard {
            width: 100%;
            text-align: left;
        }

        @keyframes messageFadein {
            to {
                opacity: 1;
            }
        }

        .message {
            width: 100%;
            margin: 10px;
            padding: 10px;
            opacity: 0;
            animation: messageFadein 0.5s ease-in-out forwards;
            background-image: linear-gradient(90deg, #8ec5fc 0%, #e0c3fc 100%);
            background-color: #fff;
            margin: 70px 0;
            border-radius: 10px;
            box-shadow: 0 10px 20px #00000026;
            text-shadow: 0px 0px 20px #ffffff;
        }

        .message-info {
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 36px;
            position: relative;
        }

        .info {
            transform: translateY(-30px);
        }

        .info img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 10px;
        }

        strong {
            position: absolute;
            width: 800px;
            letter-spacing: 3px;
            top: 70px;
            left: 170px;


        }

        .message-info span {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .content {
            font-size: 36px;
            margin: 30px;
            width: 95%;
        }
    </style>
</head>

<body>
    <div class="messages">
        <h1>留言板</h1>
        <div class="form">
            <input type="text" id="username" placeholder="用户名">
            <textarea id="message" placeholder="留言内容"></textarea>
            <button id="submitBtn">留言</button>
        </div>
        <div id="messageBoard">
            <div class="message">
                <div class="message-info">
                    <div class="info">
                        <img src="image/头像.jpg" width="50px" height="50px">
                        <strong>zzh</strong>
                    </div>
                    <span>发布于:2024.12.12</span>
                </div>
                <div class="content">你好</div>
            </div>
        </div>
    </div>
</body>
<script>

    //给提交按钮添加事件监听器
    document.getElementById('submitBtn').addEventListener('click', function () {
        //获取用户名和留言内容
        var username = document.getElementById('username').value;
        var message = document.getElementById('message').value;
        //如果留言内容为空，弹出提示并返回
        if (message == '') {
            alert('请输入内容');
            return;
        }
        //如果用户名为空，将用户设置为匿名
        if (username == '') {
            username = '匿名';
        }
        //获取留言板元素和当前时间
        var messageBoard = document.getElementById('messageBoard');
        var newMessage = document.createElement('div');
        newMessage.classList.add('message');
        //设置留言元素的innerHTML，包含用户名，时间留言内容
        newMessage.innerHTML = '<div class="message-info"><div class="info"><img src="1.jpg"><strong>'
            + username + '</strong></div><span>发布于：' + getCurrentTime() +
            '</span></div><div class="content">' + message + '</div>';
        //在留言板的第一个子元素之前插入新的留言
        messageBoard.insertBefore(newMessage, messageBoard.firstChild);
        //请空用户名和留言内容的输入框
        document.getElementById('username').value = '';
        document.getElementById('message').value = '';
    });
    //获取当前时间
    function getCurrentTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var day = ('0' + date.getDate()).slice(-2);
        var hour = ('0' + date.getHours()).slice(-2);
        var minutes = ('0' + date.getMinutes()).slice(-2);
        var seconds = ('0' + date.getSeconds()).slice(-2);
        return year + '/' + month + '/' + day + ' ' + hour + ':' + minutes + ':' + seconds;
    }
</script>

</html>